<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color:red">数据统计</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-1">
                                <div class="data-header">库存总量</div>
                                <div class="data-value">{{ DateCollect.TotalQty }}</div>
                                <div class="data-unit">件</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-2">
                                <div class="data-header">库位使用率</div>
                                <div class="data-value">{{ DateCollect.UseBinRate }}%</div>
                                <div class="data-unit">已使用 {{ DateCollect.UseBinCount }}/{{ DateCollect.BinCount }}
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-3">
                                <div class="data-header">商品总数</div>
                                <div class="data-value">{{ DateCollect.CargoCount }}</div>
                                <div class="data-unit">种</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-4">
                                <div class="data-header">客户数量</div>
                                <div class="data-value">{{ DateCollect.CustomerCount }}</div>
                                <div class="data-unit">个</div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-5">
                                <div class="data-header">入库完成数量</div>
                                <div class="data-value">{{ DateCollect.StockInCompletedCount }}</div>
                                <div class="data-unit">单</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-6">
                                <div class="data-header">出库完成数量</div>
                                <div class="data-value">{{ DateCollect.StockOutCompletedCount }}</div>
                                <div class="data-unit">单</div>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card shadow="hover" class="data-card card-7">
                                <div class="data-header">完成盘点数量</div>
                                <div class="data-value">{{ DateCollect.InventoryCheckCompletedCount }}</div>
                                <div class="data-unit">单</div>
                            </el-card>
                        </el-col>
                    </el-row>

                </el-card>
            </el-col>
            <el-col :span="8" style="margin-top: 20px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color:red">显示缺货数量最大的50个商品的补货信息</span>

                    </div>
                    <div id="echartDiv" style="height: 500px;"></div>
                </el-card>

            </el-col>
            <el-col :span="8" style="margin-top: 20px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color:red">入库单紧急程度</span>

                    </div>
                    <div style="height: 500px;">
                        <el-table :data="StockInOrderUrgencyDtoList" style="width: 100%"
                            :row-class-name="tableRowClassName">
                            <el-table-column label="单号" width="180" :align="'center'">
                                <template slot-scope="scope">

                                    <span style="margin-left: 10px">{{ scope.row.No }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="剩余时间" :align="'center'">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px"
                                        :style="{ color: scope.row.RemindSecond < 0 ? 'red' : 'inherit' }">
                                        {{ formatRemindTime(scope.row.RemindSecond) }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="紧急程度" :align="'center'">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">
                                        {{ scope.row.EmergencyRankFormat }}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </el-card>

            </el-col>
            <el-col :span="8" style="margin-top: 20px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color:red">出库单紧急程度</span>

                    </div>
                    <div style="height: 500px;">
                        <el-table :data="StockOutOrderUrgencyDtoList" style="width: 100%"
                            :row-class-name="tableRowClassName">
                            <el-table-column label="单号" width="180" :align="'center'">
                                <template slot-scope="scope">

                                    <span style="margin-left: 10px">{{ scope.row.No }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="剩余时间" :align="'center'">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px"
                                        :style="{ color: scope.row.RemindSecond < 0 ? 'red' : 'inherit' }">
                                        {{ formatRemindTime(scope.row.RemindSecond) }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="紧急程度" :align="'center'">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">
                                        {{ scope.row.EmergencyRankFormat }}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </el-card>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import PaginationBox from '@/components/Pagination/PaginationBox.vue';
import * as echarts from "echarts";
import { mapGetters } from 'vuex';
export default {
    name: 'Home',
    props: {

    },
    components: {
        PaginationBox
    },
    computed: {
        ...mapGetters([
            'Token', 'UserInfo', 'RoleType', 'HasUserInfo', 'ColumnType', "UserId", 'CurrentWarehouseId'
        ])
    },
    data() {
        return {
            myChart: null,
            CargoReplenishmentDtoList: [],
            DateCollect: {},
            StockInOrderUrgencyDtoList: [],
            StockOutOrderUrgencyDtoList: []
        };
    },
    created() {
        this.GetCargoReplenishmentDtoListApi();
        this.GetDateCollectApi();
        this.GetStockInOrderUrgencyApi();
        this.GetStockOutOrderUrgencyApi();
    },
    mounted() {

    },
    methods: {
        formatRemindTime(seconds) {
            if (seconds < 0) {
                return `超时 ${this.formatDuration(Math.abs(seconds))}`;
            }
            return this.formatDuration(seconds);
        },

        formatDuration(seconds) {
            const days = Math.floor(seconds / (24 * 60 * 60));
            const hours = Math.floor((seconds % (24 * 60 * 60)) / (60 * 60));
            const minutes = Math.floor((seconds % (60 * 60)) / 60);

            let result = '';
            if (days > 0) result += `${days}天`;
            if (hours > 0) result += `${hours}小时`;
            if (minutes > 0) result += `${minutes}分钟`;

            return result || '不到1分钟';
        },
        //补货数据
        async GetCargoReplenishmentDtoListApi() {
            let { Data: { Items } } = await this.$Post(`/InventoryRecord/GetCargoReplenishmentDtoList`, { WarehouseId: this.CurrentWarehouseId, Limit: 50 });
            this.CargoReplenishmentDtoList = Items;

            this.$nextTick(() => {
                let option = {
                    title: {
                        text: '仓库补货排行',
                        subtext: '按缺货数量排序',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            const data = params[0];
                            return `${data.name}<br/>
                                    缺货数量: ${data.value}<br/>
                                    补货建议: ${data.value > 100 ? '建议立即补货' : '可考虑补货'}`
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: Items.map(x => x.CargoDto.Name).reverse(),
                        axisLabel: {
                            interval: 0,
                            rotate: 0
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '缺货数量',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataZoom: [{
                        type: 'slider',
                        show: true,
                        start: 0,
                        end: 100
                    }, {
                        type: 'inside',
                        start: 0,
                        end: 100
                    }],
                    series: [{
                        name: '缺货数量',
                        type: 'bar',
                        barWidth: '40%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]),
                            borderRadius: [5, 5, 0, 0]
                        },
                        data: Items.map(x => x.NeedQty).reverse(),
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }]
                };

                this.myChart = echarts.init(document.getElementById("echartDiv"));
                this.myChart.setOption(option);

                window.addEventListener("resize", () => {
                    this.myChart.resize();
                });
            });
        },
        //数据统计
        async GetDateCollectApi() {
            let { Data } = await this.$Post(`/InventoryRecord/GetDateCollect`, { WarehouseId: this.CurrentWarehouseId });
            this.DateCollect = Data;
        },
        //得到入库单的紧急程度接口
        async GetStockInOrderUrgencyApi() {
            let { Data: { Items } } = await this.$Post(`/StockIn/List`, { WarehouseId: this.CurrentWarehouseId, IsNotComplted: true });
            this.StockInOrderUrgencyDtoList = Items;
        },
        //得到出库单的紧急程度接口
        async GetStockOutOrderUrgencyApi() {
            let { Data: { Items } } = await this.$Post(`/StockOut/List`, { WarehouseId: this.CurrentWarehouseId, IsNotComplted: true });
            this.StockOutOrderUrgencyDtoList = Items;
        },
        tableRowClassName({ row, rowIndex }) {
            console.log(row.EmergencyRank);
            switch (row.EmergencyRank) {
                case 1:
                    return 'urgency-low';
                case 2:
                    return 'urgency-medium';
                case 3:
                    return 'urgency-high';
                case 4:
                    return 'urgency-critical';
                default:
                    return '';
            }

        }
    }
}       
</script>


<style scoped>
.data-card {
    text-align: center;
    padding: 20px;
    transition: all 0.3s;
}

.data-card:hover {
    transform: translateY(-5px);
}

.data-header {
    font-size: 16px;
    margin-bottom: 10px;
    color: #ffffff;
}

.data-value {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #ffffff;
}

.data-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* 不同卡片的渐变背景色 */
.card-1 {
    background: linear-gradient(135deg, #1bbc9b 0%, #1bbc9b 100%);
}

.card-2 {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.card-3 {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.card-4 {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.card-5 {
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
}

.card-6 {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.card-7 {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.card-8 {
    background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
}

.card-9 {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

/* 添加卡片阴影效果 */
.el-card {
    border: none;
    border-radius: 8px;
}

.el-card.is-hover-shadow:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
</style>